<template>
	<Layout :showBack="false" headerBg :histyle="{color:'#FFFFFF'}" tabbar :innerBottom="false">
		<template #title>律师端</template>
		<view class="iflex asc aic jcsb func">
			<view class="iflex column aic jcsb func__item" @click.stop="tapToOrderManage">
				<image src="/static/image/home/order.png"></image>
				<text>订单管理</text>
			</view>

			<view class="iflex column aic jcsb func__item" @click.stop="tapToFinanceManage">
				<image src="/static/image/home/finance.png"></image>
				<text>财务管理</text>
			</view>

			<view class="iflex column aic jcsb func__item" @click.stop="tapToInformationManage">
				<image src="/static/image/home/message.png"></image>
				<text>信息管理</text>
			</view>

			<view class="iflex column aic jcsb func__item" @click.stop="tapToShopRankingManage">
				<image src="/static/image/home/shop.png"></image>
				<text>店铺排名</text>
			</view>
		</view>

		<OrderStatus />

		<SectionTitle :showRight="false">
			<template #title>最新订单</template>
		</SectionTitle>

		<view class="flex">
			<view class="scroll-wrap">
				<ScrollRefresher @refresh="loadData">
					<OrderItem v-for="item of orderList" :info="item" :key="item.orderId" @refresh="loadData()">
					</OrderItem>
				</ScrollRefresher>
			</view>
		</view>
	</Layout>
</template>

<script setup lang="ts">
	import OrderStatus from '@/components/b/order-status/order-status.vue';
	import OrderItem from '@/components/b/order-item/order-item.vue';
	import { setTabbar } from '@/utils/wx';
	import { ref } from 'vue';
	import { getTradeListAssignOrder } from '@/apis/trade';
	import { DispatchStatus } from '@/utils/constant';
	import { isLawyer, getLawFirmId } from '@/utils/auth';
	import { onShow, onPullDownRefresh } from '@dcloudio/uni-app';
	import type { AnyObj } from '@/types/global';

	setTabbar({ selected: 0 });

	const orderList = ref<AnyObj[]>([]);

	function loadData() {
		orderList.value = [];
		getTradeListAssignOrder({ dispatchStatus: DispatchStatus.Processing }).then((res) => {
			orderList.value = res.rows ?? [];
		});
	}

	onShow(() => {
		loadData();
	});

	onPullDownRefresh(() => {
		loadData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500)
	});

	function tapToOrderManage() {
		uni.navigateTo({
			url: "/pages-order/order-manage/order-manage"
		})
	}

	function tapToFinanceManage() {
		uni.navigateTo({
			url: "/pages-other/finance/finance"
		})
	}

	function tapToInformationManage() {
		const lawFirmId = getLawFirmId();
		if (isLawyer()) {
			uni.navigateTo({
				url: `/pages-lawyer/lawyer-detail/lawyer-detail?lawFirmId=${lawFirmId}`
			})
			return;
		}

		uni.navigateTo({
			url: `/pages-lawyer/law-detail/law-detail?lawFirmId=${lawFirmId}`
		})
	}

	function tapToShopRankingManage() {
		uni.navigateTo({
			url: "/pages-other/shop-ranking/shop-ranking"
		})
	}
</script>

<style lang="scss">
	.func {
		margin-top: 130rpx;
		width: 690rpx;
		height: 200rpx;
		flex-shrink: 0;
		border-radius: 12rpx;
		background: #FFF;

		&__item {
			padding: 35rpx 32rpx;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			text {
				padding-top: 10rpx;
				color: #101010;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
		}
	}
</style>